<template>
	<view class="content">
		<!-- #ifdef H5 || APP-PLUS -->
		<view class="message-title">
			<commonTitle title="创建分享"></commonTitle>
		</view>
		<!-- #endif -->
		<view class="list-scroll-content">
			<view class="share-type">
				<view class="share-type-item" :class="{'type-selected':Textshow}" @tap="ShowType(1)">分享文案</view>
				<view class="share-type-item" :class="{'type-selected':Imgshow}" @tap="ShowType(2)">分享图片</view>
			</view>
			<!-- 分享文案 -->
			<view class="share-text" v-if="Textshow">
				<view class="text-block" ref="copytext">
					{{text.title}}
					【在售价】{{text.zk_final_price}}元
					【抢购价】{{text.qh_final_price}}元
					【福利抢购链接】{{text.coupon_click_url}} 
					———————— 
					复制这条信息，{{text.coupon_tpwd}}，到【手机淘宝】即可查看
				</view>
				<view class="btns-img">
					<view class="save-img-btn" @tap="CopyText">复制文案</view>
					<!-- <view class="share-img-btn" @tap="openShare">分享文案</view> -->
					<view class="share-img-btn" @tap="shareText">分享文案</view>
				</view>
			</view>
			<!-- 分享图片 -->
			<view class="share-goods-img" v-if="Imgshow">
				<!-- <view class="share-img">
					<view class="chose-img">选择图片</view>
					<view class="scroll-navbar-box">
						<view class="scroll-view_H">
							<view class="share-img-block" @click="choseImg">
								<image src="../../static/common/share-goods-img.png" class="img"></image>
								<image 
								:src="imgSelected?'../../static/common/chose-yes.png':'../../static/common/chose-no.png'"
								 class="chose-icon"></image>
							</view>
							<view class="share-img-block" @click="choseImg">
								<image src="../../static/common/share-goods-img.png" class="img"></image>
								<image 
								:src="imgSelected?'../../static/common/chose-yes.png':'../../static/common/chose-no.png'"
								 class="chose-icon"></image>
							</view>
							<view class="share-img-block">
								<image src="../../static/common/share-goods-img.png" class="img"></image>
								<image src="../../static/common/chose-no.png" class="chose-icon"></image>
							</view>
							<view class="share-img-block">
								<image src="../../static/common/share-goods-img.png" class="img"></image>
								<image src="../../static/common/chose-no.png" class="chose-icon"></image>
							</view>
							<view class="share-img-block">
								<image src="../../static/common/share-goods-img.png" class="img"></image>
								<image src="../../static/common/chose-no.png" class="chose-icon"></image>
							</view>
							<view class="share-img-block">
								<image src="../../static/common/share-goods-img.png" class="img"></image>
								<image src="../../static/common/chose-no.png" class="chose-icon"></image>
							</view>
						</view>
					</view>
					
					
				</view> -->
				
				<view class="main-pic" @click="choseImg">
					<image v-if="qrcode" :src="qrcode" mode="widthFix" ></image>
					<!-- <image class="main-img" src="../../static/common/main-img.png"></image>
					<image 
					:src="imgSelected?'../../static/common/chose-yes.png':'../../static/common/chose-no.png'"
					class="chose-icon big-size"></image>
					<view class="goods-info">
						<view class="goods-base-info">
							<view class="goods-name">设置的.9.png图片（图片尺寸请按照提示尺寸对应上传），保存后提交云端打包即可。</view>
							<view class="current-price">现价 ￥24.9</view>
							<view class="coupon">
								<view class="coupon-num">5元券</view>
								<view class="after-coupon">券后价</view>
								<view class="after-coupon-price">￥19.9</view>
							</view>
						</view>
						<image src="../../static/common/goods-qw.png" class="qw"></image>
					</view> -->
				</view>
				<view class="btns-img">
				<!-- 	<view class="save-img-btn">保存图片</view>
					<view class="share-img-btn" @tap="openShare">分享图片</view> -->
					<view class="meade-share-img" @tap="ShareImg">分享图片</view>
				</view>
			</view>
			
		</view>
		<!-- 图片绘制 -->
		<view class="flex_row_c_c modalView" :class="qrShow?'show':''" @tap="hideQr()">
			<view class="flex_column">
				<view class="backgroundColor-white padding1vh border_radius_10px">
					<image :src="poster.finalPath" mode="widthFix" class="posterImage"></image>
				</view>
				<view class="flex_row marginTop2vh">
					<button type="primary" size="mini" @tap.prevent.stop="saveImage()">保存图片</button>
					<button type="primary" size="mini" @tap.prevent.stop="share()">分享图片</button>
				</view>
			</view>
		</view>
		<view class="hideCanvasView">
			<canvas class="hideCanvas" canvas-id="default_PosterCanvasId" :style="{width: (poster.width||0) + 'px', height: (poster.height||0) + 'px'}"></canvas>
		</view>
		<!-- 分享 -->
		<uni-popup ref="showshare" :type="type" @change="change">
			<view class="uni-share">
				<text class="uni-share-title">分享到</text>
				<view class="uni-share-content">
					<view v-for="(item, index) in bottomData" :key="index" class="uni-share-content-box">
						<view class="uni-share-content-image">
							<image :src="item.icon" class="content-image" mode="widthFix" />
						</view>
						<text class="uni-share-content-text">{{ item.text }}</text>
					</view>
				</view>
				<text class="uni-share-btn" @click="cancel('share')">取消分享</text>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import commonTitle from'../../components/titile/title.vue'
	import uniPopup  from'../../components/uni-popup/uni-popup.vue'
	import _app from '@/util/QS-SharePoster/app.js';
	import {
		getSharePoster
	} from '@/util/QS-SharePoster/QS-SharePoster.js';
	export default{
		name:"shareGoods",
		components:{
			commonTitle,
			uniPopup
		},
		data(){
			return{
				Textshow:true,
				Imgshow:false,
				type: 'bottom',
				bottomData:[],
				copyText:"",
				imgSelected:false,
				poster: {},
				qrShow: false,
				canvasId: 'default_PosterCanvasId',
				text:"",
				apptoken:"",
				product_id:"",
				qrcode:"",//分享图片
			}
		},
		onLoad(option){
			//获取分享图片
			this.product_id = option.goodsId;
			this.getShareImg();
			//get apptoken
			this.apptoken = uni.getStorageSync("apptoken");
			//get 分享文本
			this.text = uni.getStorageSync("shareText");
			//console.log(this.text);
			this.bottomData = this.$Data.bottomData;
			
			this.copyText = this.text.title +'【在售价】'+this.text.zk_final_price+'元'+
			'【抢购价】'+this.text.qh_final_price+'元'+'【福利抢购链接】'+this.text.coupon_click_url+
			'———————— '+'复制这条信息，'+this.text.coupon_tpwd + '，到【手机淘宝】即可查看'
			
			
					//this.canvasImg();
		},
		methods:{
			getShareImg(){
				//请求分享图片
				const _this = this;
				console.log("请求中。。。")
				uni.request({
					url:this.$API.URL + this.$API.tbk_tk_qrcode,
					data:{apptoken:this.apptoken,goodsId:this.product_id},
					success(res) {
						console.log(res)
						if(res.data.success){
							res.data.data.forEach(item=>{
								_this.qrcode = item.data.qrcode;
							})
								
						}
					
					}
				})
			},
			choseImg(){
				this.imgSelected = !this.imgSelected;
			},
			CopyText(){
				//复制分享文案
				
				uni.setClipboardData({
						data:this.copyText,
						success: function () {
							 uni.showToast({
								title:"文案复制成功"
							 })
						}
				});
			},
			ShowType(n){
				switch(n){
					case 1:
						this.Textshow = true;
						this.Imgshow = false;
						break;
					case 2:
						this.Textshow = false;
						this.Imgshow = true;
						break;
				}
			},
			openShare(){
				 this.$refs.showshare.open()
			},
			cancel(type) {
				this.$refs['show' + type].close()
			},
			change(e) {
				console.log('是否打开:' + e.show)
			},
			/////////////////////////////////////////////////////////////
			async shareFc(postId) {
				try {
					console.log('准备生成:' + new Date())
					const d = await getSharePoster({
						_this: this, //若在组件中使用 必传
						type: 'testShareType',
						formData: {
							//访问接口获取背景图携带自定义数据
							postId:postId
						},
						posterCanvasId: this.canvasId,	//canvasId
						delayTimeScale: 20, //延时系数
						background: {
							width: 525,
							height: 800,
							backgroundColor: '#fff'
						},
						drawArray: ({
							bgObj,
							type,
							bgScale
						}) => {
							const dx = bgObj.width * 0.3;
							const fontSize = bgObj.width * 0.045;
							const lineHeight = bgObj.height * 0.04;
							//可直接return数组，也可以return一个promise对象, 但最终resolve一个数组, 这样就可以方便实现后台可控绘制海报
							return new Promise((rs, rj) => {
								rs([
									{
										type: 'image',
										url: '/static/main-img.png',
										dx:0,
										dy:0,
										infoCallBack(imageInfo) {
											let scale = bgObj.width * 0.2 / imageInfo.height;
											return {
												// circleSet: {
												// 	x: imageInfo.width * scale / 2,
												// 	y: bgObj.width * 0.2 / 2,
												// 	r: bgObj.width * 0.2 / 2
												// }, // 圆形图片 , 若circleSet与roundRectSet一同设置 优先circleSet设置
												dWidth:bgObj.width, // 因为设置了圆形图片 所以要乘以2
												dHeight: bgObj.width,
												// roundRectSet: { // 圆角矩形
												// 	r: imageInfo.width * .1
												// }
											}
										}
									},
									{
										type:'text',
										text:'设置的.9.png图片（图片尺寸请按照提示尺寸对应上传），保存后提交云端打包即可。',
										size:16,
										color:'#666666',
										textAlign:'left',
										textBaseline:'top',
										dx:10,
										dy: bgObj.height - bgObj.width * 0.45,
										lineFeed:{
											maxWidth: 220,
											lineHeight: 30,
											lineNum: -1,
											dx: -1
										}
									},
									{
										type:'text',
										text:'现价 ￥ 24.9',
										size:16,
										color:'#B1B8C1',
										textAlign:'left',
										textBaseline:'top',
										dx:10,
										dy: bgObj.height * 0.85,
									},
									{
										type: 'custom',
										setDraw(Context) {
											Context.setFillStyle('#F4637A');
											Context.fillRect(10, bgObj.height - bgObj.height * 0.1, 80, 35);
											Context.setGlobalAlpha(1);
										}
									},
									{
										type:'text',
										text:'5元券',
										size:16,
										color:'#fff',
										textAlign:'center',
										textBaseline:'middle',
										dx:bgObj.width * 0.1,
										dy: bgObj.height * 0.93,
										lineFeed:{
											maxWidth: 80,
											lineHeight: 35,
											lineNum: -1,
											dx: -1
										},
									},
									{
										type:'text',
										text:'券后价',
										size:16,
										color:'#B1B8C1',
										textAlign:'center',
										textBaseline:'middle',
										dx:bgObj.width * 0.32,
										dy: bgObj.height * 0.93,
										lineFeed:{
											maxWidth: 80,
											lineHeight: 35,
											lineNum: -1,
											dx: -1
										}
									},
									{
										type:'text',
										text:'￥19.9',
										size:16,
										color:'#F4637A',
										textAlign:'center',
										textBaseline:'middle',
										dx:bgObj.width * 0.45,
										dy: bgObj.height * 0.93,
										lineFeed:{
											maxWidth: 80,
											lineHeight: 35,
											lineNum: -1,
											dx: -1
										}
									},
									{
										type: 'qrcode',
										text: '你好，我是Nico',
										size: 120,
										dx: bgObj.width * 0.65,
										dy: bgObj.height - bgObj.width * 0.45
									}
								]);
							})
						},
						setCanvasWH: ({
							bgObj,
							type,
							bgScale
						}) => { // 为动态设置画布宽高的方法，
							this.poster = bgObj;
						}
					});
					console.log('海报生成成功, 时间:' + new Date() + '， 临时路径: ' + d.poster.tempFilePath)
					this.poster.finalPath = d.poster.tempFilePath;
					this.qrShow = true;
				} catch (e) {
					_app.hideLoading();
					_app.showToast(JSON.stringify(e));
					console.log(JSON.stringify(e));
				}
			},
			
			saveImage() {
				// #ifndef H5
				uni.saveImageToPhotosAlbum({
					filePath: this.poster.finalPath,
					success(res) {
						_app.showToast('保存成功');
					}
				})
				// #endif
				// #ifdef H5
				_app.showToast('保存了');
				// #endif
			},
			shareText(){
				const _this = this;
				uni.showActionSheet({
				    itemList: ['微信', '朋友圈'],
				    success: function (res) {
				        //console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
								if(res.tapIndex == 0){
									//分享到微信
									uni.share({
									    provider: "weixin",
									    scene: "WXSceneSession",
									    type: 1,
									    summary: _this.copyText,
									    success: function (res) {
									        console.log("success:" + JSON.stringify(res));
									    },
									    fail: function (err) {
									        console.log("fail:" + JSON.stringify(err));
									    }
									});
								}else if(res.tapIndex == 1){
									//分享到朋友圈
									uni.share({
									    provider: "weixin",
									    scene: "WXSenceTimeline",
									    type: 1,
									    summary:  _this.copyText,
									    success: function (res) {
									        console.log("success:" + JSON.stringify(res));
									    },
									    fail: function (err) {
									        console.log("fail:" + JSON.stringify(err));
									    }
									});
								}
				    },
				    fail: function (res) {
				        console.log(res.errMsg);
				    }
				});
				// // #ifdef APP-PLUS
				// _app.getShare(false, false, false, '', this.copyText, '', '', false, false);
				// // #endif
							
				// // #ifndef APP-PLUS
				// _app.showToast('分享了');
				// // #endif
			},
			ShareImg(){
				//分享图片
				const _this = this;
				uni.showActionSheet({
				    itemList: ['微信', '朋友圈'],
				    success: function (res) {
							//console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
							if(res.tapIndex == 0){
								uni.share({
								    provider: "weixin",
								    scene: "WXSceneSession",
								    type: 2,
								    imageUrl: _this.qrcode,
								    success: function (res) {
								        console.log("success:" + JSON.stringify(res));
								    },
								    fail: function (err) {
								        console.log("fail:" + JSON.stringify(err));
								    }
								});
							}else if(res.tapIndex == 1){
								uni.share({
								    provider: "weixin",
								    scene: "WXSenceTimeline",
								    type: 2,
								    imageUrl: _this.qrcode,
								    success: function (res) {
								        console.log("success:" + JSON.stringify(res));
								    },
								    fail: function (err) {
								        console.log("fail:" + JSON.stringify(err));
								    }
								});
							}
						},
				})
			},
			share() {
				// #ifdef APP-PLUS
				_app.getShare(false, false, 2, '', '', '', this.poster.finalPath, false, false);
				// #endif
			
				// #ifndef APP-PLUS
				_app.showToast('分享了');
				// #endif
			},
			hideQr() {
				this.qrShow = false;
			}
			
		}
	}
</script>

<style>
	@import url("share-goods.css");
	.hideCanvasView {
		position: relative;
	}
	
	.hideCanvas {
		position: fixed;
		top: -99999upx;
		left: -99999upx;
		z-index: -99999;
	}
	
	.flex_row_c_c {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}
	
	.modalView {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		opacity: 0;
		outline: 0;
		transform: scale(1.2);
		perspective: 2500upx;
		background: rgba(0, 0, 0, 0.6);
		transition: all .3s ease-in-out;
		pointer-events: none;
		backface-visibility: hidden;
		z-index: 999;
	}
	
	.modalView.show {
		opacity: 1;
		transform: scale(1);
		pointer-events: auto;
	}
	
	.flex_column {
		display: flex;
		flex-direction: column;
	}
	
	.backgroundColor-white {
		background-color: white;
	}
	
	.border_radius_10px {
		border-radius: 10px;
	}
	
	.padding1vh {
		padding: 1vh;
	}
	
	.posterImage {
		width: 60vw;
	}
	
	.flex_row {
		display: flex;
		flex-direction: row;
	}
	
	.marginTop2vh {
		margin-top: 2vh;
	}
	.marginTop2vh button{
		background: #F4637A;
	}
</style>
